<!--
 * @Author: Haochen
 * @Date: 2021-12-08 14:59:49
 * @LastEditTime: 2021-12-09 20:03:53
 * @FilePath: \students-system\src\views\teachers\AddTeacher.vue
-->
<template>
  <div>
    <h4>新增教师</h4>
    <select v-model="newTeacher.subjectsId">
      <option :value="undefined" disabled>请选择专业</option>
      <option
        v-for="subject in subjects"
        :key="subject._id"
        :value="subject._id"
      >
        {{ subject.name }}
      </option>
    </select>

    <h4>教师名字</h4>
    <input type="text" v-model.lazy="newTeacher.name" /> &nbsp;
    <button @click="addNewTeacher">确认新增</button><br />

    <h4>搜索教师</h4>
    <input type="text" v-model.lazy="searchData.value" /> &nbsp;
    <button @click="confirmSearch">确认搜索</button>

    <table>
      <thead>
        <tr>
          <th>教师名称</th>
          <th>教师操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="teacher in teachers" :key="teacher._id">
          <td>{{ teacher.name }}</td>
          <td>修改 删除</td>
        </tr>
      </tbody>
    </table>

    <div class="stats-row">
      <span>共{{ total }}条数据</span>
      <span> 页码 {{ pageData.currentPage }} / {{ pages }} </span>
    </div>
    <Pages
      @prevPage="prevPage"
      @nextPage="nextPage"
      @firstPage="firstPage"
      @lastPage="lastPage"
    ></Pages>
  </div>
</template>

<script>
import Pages from '../../components/common/Pages.vue';
import bus from '../students/bus.js';
export default {
  data() {
    return {
      newTeacher: {},
      subjects: [],
      teachers: [],
      total: 0,
      pages: 0,
      pageData: { currentPage: 1, pageSize: 3 },
      searchData: { value: '' },
    };
  },
  created() {
    bus.$on('sendPageSize', (size) => {
      this.pageData.pageSize = size;
      this.pageData.currentPage = 1;
      this.getSubjects();
    });
    this.getSubjects();
    this.getTeachers();
  },
  methods: {
    async addNewTeacher() {
      const { data: res } = await this.$api.teachers.addNewTeacher(
        this.newTeacher
      );
      if (res.code) {
        alert(res.message);
        this.newTeacher = {};
        this.getTeachers();
      }
    },
    async getSubjects() {
      const { data: res } = await this.$api.subjects.getSubjects();
      this.subjects = res.data.rows;
    },

    async getTeachers() {
      const { data: res } = await this.$api.teachers.getAllTeachers({
        ...this.pageData,
        ...this.searchData,
      });

      this.total = res.data.total;
      this.pages = res.data.pages;
      this.teachers = res.data.rows;
    },

    confirmSearch() {
      this.getTeachers();
      this.pageData.currentPage = 1;
    },
    // * 下一页功能
    nextPage() {
      if (this.pageData.currentPage < this.pages) {
        this.pageData.currentPage++;
      }
    },

    // * 上一页功能
    prevPage() {
      if (this.pageData.currentPage > 1) {
        this.pageData.currentPage--;
      }
    },
    // * 首页功能
    firstPage() {
      this.pageData.currentPage = 1;
    },
    // * 尾页功能
    lastPage() {
      this.pageData.currentPage = this.pages;
    },
  },
  watch: {
    pageData: {
      deep: true,
      handler() {
        this.getTeachers();
      },
    },
  },
  components: { Pages },
};
</script>

<style></style>
